<template>

 
      <el-form
        ref="formRef"
        size="large"
        label-position="right"
        label-width="100px"
        :model="form"
        :rules="rules"
        style="width: 360px; margin: 0px auto"
      >
        <el-form-item label="原密码" prop="old_pwd"  >
          <el-input v-model="form.old_pwd" type="password" show-password ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_pwd">
          <el-input v-model="form.new_pwd" type="password" show-password ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="re_new_pwd">
          <el-input v-model="form.re_new_pwd" type="password" show-password ></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right; width: 360px; margin: 40px auto 0px">
        <el-button
          @click="exec"
          type="primary"
          size="large"
          style="width: 260px"
          >确定</el-button
        >
      </div>


</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { post, tip, setLocalToken , put} from "@/common";

const formRef = ref();

const router = useRouter(); //获取路由器

const form = reactive({ old_pwd: "", new_pwd: "",re_new_pwd:"" });

const validateReNewPassword = (rule,value, callback) => {
  if (value === '') {
    callback(new Error('请输入确认密码！'))
  } else if (value !== form.new_pwd) {
    callback(new Error("两次输入新密码不一致！"))
  } else {
    callback();
  }
};

const rules = reactive({
  old_pwd: [
    {
      required: true,
      message: "请输入原密码！",
      trigger: "blur",
    },
  ],
  new_pwd: [
    {
      required: true,
      message: "请输入新密码！",
      trigger: "blur",
    },
    {
      min: 6,
      max: 10,
      message: '密码应包含6~10个字符组成！',
      trigger: 'blur',
    },
  ],
  re_new_pwd:[
      {
           validator: validateReNewPassword, 
           trigger: 'blur'
      }
  ]
});

const exec = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      //向服务端发出post请求
      put("/security/password", form).then((result) => {
        tip.success({
            message:'修改密码成功！请重新登录。',
            onClose:()=>router.push({ name: "Login" })
        });
        
      });
    } else {
      tip.error("数据格式错误！");
    }
  });
};
</script>


<style scoped>
.login {
  background-image: url("/sign-bg.jpeg");

  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.box-card {
  width: 800px;
  height: 600px;
  opacity: 0.92;
  /* display:flex;
  flex-direction: column;
  align-items: center; */
}
</style>
